<template>
  <transition name="pop">
    <div v-show="isShowPop" class="vt-pop">
      <overlay :is-show="showOverlayer" @click.native="hide"/>
      <div class="vt-pop-content">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
  import Overlay from '../overlay/overlay'
  export default {
    props: {
      showOverlayer: {
        type: Boolean,
        deafult(){
          return false
        }
      }
    },
    components: {
      Overlay
    },
    data() {
      return {
        isShowPop: false
      }
    },
    methods: {
      show() {
        this.isShowPop = true
      },
      hide() {
        this.isShowPop = false
      }
    }
  }
</script>

<style scoped lang="stylus">
@import "./index.styl"
</style>
